<template>
  <div>
    <van-nav-bar
      title="地图找房"
      fixed
      placeholder
      left-arrow
      @click-left="onClickLeft"
    />
    <div id="container"></div>
    <!-- <van-cell is-link @click="show = true">展示弹出层</van-cell> -->
  </div>
</template>

<script>
import { getMap } from '@/api/map'
import { getCity } from '@/utils/storage'
import { gethouses } from '@/api/look-house'
export default {
  name: 'map-page',
  components: {},
  props: {},
  data() {
    return {
      // arr: []
      // show: false,
      // url: 'http://liufusong.top:8080'
    }
  },
  computed: {},
  watch: {},
  async created() {
    // console.log(getCity())
    // const res = await getMap({ id: getCity().value })
    // console.log(res.data.body)
    // const res1 = res.data.body.map((item) => item.coord)
    // console.log(res1)
    // this.arr = res1
  },
  methods: {
    onClickLeft() {
      this.$router.push('/')
    }
  },
  async mounted() {
    const map = new window.BMapGL.Map('container')
    const cityName = getCity() ? getCity().label + '市' : '上海市'
    map.centerAndZoom(cityName, 12)
    const res = await getMap({ id: getCity().value })
    // this.arr = res.data.body.map((item) => item.coord)
    console.log(res)
    res.data.body.forEach((item) => {
      const point = new window.BMapGL.Point(
        item.coord.longitude,
        item.coord.latitude
      )
      // const point = new BMapGL.Point(116.404, 39.915)
      const content = item.label + '<br>' + item.count + '套'
      const label = new window.BMapGL.Label(content, {
        // 创建文本标注
        position: point, // 设置标注的地理位置
        offset: new window.BMapGL.Size(10, 20) // 设置标注的偏移量
      })
      map.addOverlay(label)
      label.setStyle({
        // 设置label的样式
        color: '#fff',
        backgroundColor: 'green',
        fontSize: '14px',
        borderRadius: '50%',
        width: '70px',
        height: '70px',
        padding: '20px',
        textAlign: 'center',
        // border: '2px solid #1E90FF',
        display: 'flex',
        'align-items': 'center',
        'justify-content': 'center',
        background: 'rgba(12,181,106,.9)',
        border: '2px solid hsla(0,0%,100%,.8)'
      })
      label.addEventListener('click', async function () {
        console.log(item.value)
        const point = new window.BMapGL.Point(
          item.coord.longitude,
          item.coord.latitude
        )
        map.centerAndZoom(point, 15)
        map.clearOverlays() // 移除覆盖物
        // const res = await axios.get(
        //   'http://liufusong.top:8080/area/map?id=' + item.value
        // )
        const res = await getMap({ id: item.value })
        console.log(res)

        res.data.body.forEach((item) => {
          const point = new window.BMapGL.Point(
            item.coord.longitude,
            item.coord.latitude
          )
          const content = item.label + '<br>' + item.count
          const label = new window.BMapGL.Label(content, {
            // 创建文本标注
            position: point, // 设置标注的地理位置
            offset: new window.BMapGL.Size(10, 20) // 设置标注的偏移量
          })
          map.addOverlay(label) // 将标注添加到地图中
          label.setStyle({
            // 设置label的样式
            color: '#fff',
            backgroundColor: 'green',
            fontSize: '14px',
            borderRadius: '50%',
            width: '70px',
            height: '70px',
            padding: '20px',
            textAlign: 'center',
            // border: '2px solid #1E90FF',
            display: 'flex',
            'align-items': 'center',
            'justify-content': 'center',
            background: 'rgba(12,181,106,.9)',
            border: '2px solid hsla(0,0%,100%,.8)'
          })

          label.addEventListener('click', async function () {
            console.log(item.value)
            const point = new window.BMapGL.Point(
              item.coord.longitude,
              item.coord.latitude
            )
            map.centerAndZoom(point, 15)
            map.clearOverlays() // 移除覆盖物
            // const res = await axios.get(
            //   'http://liufusong.top:8080/area/map?id=' + item.value
            // )
            const res = await getMap({ id: item.value })
            console.log(res)

            res.data.body.forEach((item) => {
              const point = new window.BMapGL.Point(
                item.coord.longitude,
                item.coord.latitude
              )
              const content = item.label + '<br>' + item.count
              const label = new window.BMapGL.Label(content, {
                // 创建文本标注
                position: point, // 设置标注的地理位置
                offset: new window.BMapGL.Size(10, 20) // 设置标注的偏移量
              })
              map.addOverlay(label) // 将标注添加到地图中
              label.setStyle({
                // 设置label的样式
                color: '#fff',
                backgroundColor: 'green',
                fontSize: '14px',
                borderRadius: '50%',
                width: '70px',
                height: '70px',
                padding: '20px',
                textAlign: 'center',
                // border: '2px solid #1E90FF',
                display: 'flex',
                'align-items': 'center',
                'justify-content': 'center',
                background: 'rgba(12,181,106,.9)',
                border: '2px solid hsla(0,0%,100%,.8)'
              })
              label.addEventListener('click', async function () {
                // this.show = trues
                console.log(item.value)
                const res = await gethouses({ cityId: item.value })
                console.log(res)
                this.arr = res.data.body.list
              })
            })
          })
        })
      })
    })
  }
}
</script>

<style lang="less" scoped>
::v-deep .van-nav-bar .van-icon {
  color: white;
}
#container {
  height: 100vh;
}
</style>
